<template>
  <div class="permissionsDialog-container ">
    <el-dialog
      :title="differenttitle? '编辑权限组' : '创建权限组'"
      :visible="visible"
      @update:visible="$emit('update:visible', $event)"
      width="40%"
      @closed="onclosed"
      @opened="onopened"
      v-loading="loading"
    >
      <el-form ref="permissionsform" :rules="permissionsRules" :model="permissionsForm" label-width="100px">
        <el-form-item label="用户名" prop="title">
          <el-input v-model="permissionsForm.title"></el-input>
        </el-form-item>
        <el-form-item label="权限分配" prop="permissions">
            <template #default>
              <el-tree
                ref="tree"
                node-key="id"
                highlight-current
                :props="permissionProps"
                :data="permissiondata"
                :show-checkbox="true"
                default-expand-all
                @check="getCheckedKeys"
                :default-checked-keys="defaultkeys"
                >
              </el-tree>
            </template>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClose">取 消</el-button>
        <el-button type="primary" @click="onConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { findmenusList } from '@/api/menus'
import { AddPermissiont, putPermissiont, PermissiontDetails } from '@/api/permission'

export default {
  name: 'userDialog',
  props: {
    visible: Boolean,
    differenttitle: Boolean,
    selectId: Number
  },
  data () {
    return {
      permissionProps: {
        children: 'childs',
        label: 'title'
      },
      permissiondata: [],
      permissionsForm: {
        title: ''
      },
      // 表单验证
      permissionsRules: {
        title: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        permissions: []
      },
      options: [],
      checkdata: [],//选中的复选框
      defaultkeys: [],//复选框的默认选中
      loading: false
    }
  },
  created () {
  },
  methods: {
    onClose () {
      this.$emit('update:visible', false)
    },
    onConfirm () {
      this.$refs.permissionsform.validate(async(valid)=>{
        if (valid) {
          if(!this.differenttitle) {
            const obj ={
              title: this.permissionsForm.title,
              permissions:this.checkdata
            }
            await AddPermissiont(obj)
          } else {
            const permissions = this.defaultkeys
            await putPermissiont(this.selectId, permissions, this.permissionsForm.title)
          }
        }
      })
      this.$emit('refresh')
      this.onClose()
    },
    // form表单打开时
    onopened () {
      this.menusList()
    },
    // form表单关闭时
    onclosed () {
      this.$refs.permissionsform.resetFields()
      // 默认选中为空
      this.defaultkeys = []
    },
    // 菜单列表
    async menusList () {
      const res = await findmenusList()
      const menusdate = [{id: 0, title: '系统菜单和页面权限点', childs: []}]
      menusdate.forEach(val =>{
        for (let i in res){
          val.childs.push(res[i])
        }
      })
      this.permissiondata = menusdate
    },
    // 获得选中复选框赋值checkdata
    getCheckedKeys () {
      this.checkdata = this.$refs.tree.getCheckedKeys()
    },
    // 获取权限详情
    async getPermissiontDetails () {
      this.loading = true
      const { title, permissions } = await PermissiontDetails (this.selectId)
      console.log(permissions)
      this.permissionsForm.title = title
      // 权限详情列表赋值给复选框默认选中
      this.defaultkeys = permissions
      this.loading = false
    }
  },
  watch: {
    visible (val) {
      if(val && this.differenttitle && this.selectId) {
        this.getPermissiontDetails()
      }
    }
  }
}
</script>

<style>

</style>